<template>
    <img :src="src" :width="showWidth" :height="showHeight" />
</template>

<style lang="scss" scoped>
.width-side {
    width: 98%;
}

.height-side {
    height: 98%;
}
</style>

<script>
import _ from 'lodash';

export default {
    props: ['src', 'width', 'height', 'contentWidth', 'contentHeight'],
    data() {
        return {};
    },
    computed: {
        ratio() {
            return _.divide(this.width, this.height);
        },
        showWidth() {
            let finalWidth = 0;
            if (this.width > this.height) {
                let newHeight = this.contentWidth / this.ratio;
                finalWidth = _.gt(newHeight, this.contentHeight) ? this.contentHeight * this.ratio : this.contentWidth;
            } else {
                let newWidth = this.contentHeight * this.ratio;
                finalWidth = _.gt(newWidth, this.contentWidth) ? this.contentWidth : newWidth;
            }
            return _.multiply(finalWidth, 0.99);
        },
        showHeight() {
            let finalHeight = 0;
            if (this.width > this.height) {
                let newHeight = this.contentWidth / this.ratio;
                finalHeight = _.gt(newHeight, this.contentHeight) ? this.contentHeight : newHeight;
            } else {
                let newWidth = this.contentHeight * this.ratio;
                finalHeight = _.gt(newWidth, this.contentWidth) ? this.contentWidth / this.ratio : this.contentHeight;
            }
            return _.multiply(finalHeight, 0.99);
        }
    }
}
</script>

